<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/AdminLTE.css">
<link rel="stylesheet" href="css/admin.css">
<title>上墙设置</title>


<style>
.wall-list .wall-img{
    max-width: 200px;

}
</style>
<section class="content-header">
<h1>
    上墙设置
</h1>
<ol class="breadcrumb">
    <li><a href="#"><i class="fa fa-home"></i>首页</a></li>
    <li class="active">上墙设置</li>
</ol>
</section>

<style type="text/css">

</style>
<div class="m-container">

<div class="m-container">
    <div class="row">
        <div class="col-md-12">
            <!-- start box -->
            <div class="box box-info">
                <div class="box-header with-border">
                    <h3 class="box-title">上墙设置</h3>
                </div>
                <div class="box-body ">
                    <!-- start tabs -->
                    <div class="nav-tabs-custom">
                        <ul class="nav nav-tabs">
                          <li class=""><a href="#tab_1" data-toggle="tab" aria-expanded="true">功能说明</a></li>
                          <li class="active"><a href="#tab_2" data-toggle="tab" aria-expanded="false">功能设置</a></li>
                          <li class=""><a href="#tab_3" data-toggle="tab" aria-expanded="false">功能数据</a></li>
                        </ul>

<!-- start tab-content -->
<div class="tab-content" style="min-height: 300px;">
    <div class="tab-pane" id="tab_1">
        <div style="padding: 20px;text-align: center;">
            <div style="border:solid 1px #f4f4f4;padding: 20px;border-radius: 3px;display: inline-block;">
            <p>现场大屏幕+手机屏幕双屏同步！客人通过微信发送信息、表情、照片，可即时展示在现场大屏幕上。</p>
            <p>
            <span class="status on">
                <i class="point"></i>
                开启
            </span>
            </p>
            <button class="btn btn-info">关闭功能</button>
            </div>
        </div>
    </div>



    <div class="tab-pane active" id="tab_2">
        <div class="config-group stripe">
            <div class="config-group-item">
                <div class="item-key">
                    <strong>乐上墙标题</strong>
                </div>
                <div class="item-value">
                    <input type="text" class="item-input" placeholder="输入内容">
                    <p class="item-info">大屏幕显示标题</p>
                </div>
            </div>
            <div class="config-group-item">
                <div class="item-key">
                    <strong>手机端网址</strong>
                </div>
                <div class="item-value">
                    <input type="text" class="item-input" placeholder="手机端网址">
                </div>
                <div class="item-control" >
                    <div class="btn-group" style="width: 200px;">
                      
                      <button type="button" class="btn btn-info">复制</button>
                      <div class="btn-group">
                          <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">扫描二维码&nbsp;<span class="caret"></span></button>
                          <ul class="dropdown-menu qrcode-box">
                            <li ><img src="img/user1-128x128.jpg" alt="" class="qrcode"></li>
                          </ul>
                      </div>
                    </div>
                </div>
            </div>
            <div class="config-group-item">
                <div class="item-key">
                    <strong>交友链接</strong>
                </div>
                <div class="item-value">
                    <input type="text" class="item-input" placeholder="手机端网址">
                </div>
                <div class="item-control" >
                    <div class="btn-group" style="width: 200px;">
                      
                      <button type="button" class="btn btn-info">复制</button>
                      <div class="btn-group">
                          <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">扫描二维码&nbsp;<span class="caret"></span></button>
                          <ul class="dropdown-menu qrcode-box">
                            <li ><img src="img/user1-128x128.jpg" alt="" class="qrcode"></li>
                          </ul>
                      </div>
                    </div>
                </div>
            </div>
            <div class="config-group-item">
                <div class="item-key">
                    <strong>大屏幕网址</strong>
                </div>
                <div class="item-value">
                    <input type="text" class="item-input" placeholder="手机端网址">
                </div>
                <div class="item-control">
                    <div class="btn-group" style="width: 250px;">
                        <a href="#" class="btn btn-info">打开链接</a>
                        <div class="btn-group">
                            <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">下载二维码&nbsp;<span class="caret"></span></button>
                            <ul class="dropdown-menu qrcode-box">
                                <li >
                                    <img src="img/user1-128x128.jpg" alt="" class="qrcode">
                                    <a href="#">下载二维码</a>
                                </li>
                            </ul>
                        </div>
                        <button class="btn btn-info">复制</button>
                    </div>
                </div>
            </div>
            <div class="config-group-item">
                <div class="item-key">
                    <strong>乐上墙消息显示条数</strong>
                </div>
                <div class="item-value">
                    <input type="text" class="item-input" value="20" placeholder="输入内容">
                    <p class="item-info">大屏幕信息显示</p>
                </div>
            </div>
            <div class="config-group-item">
                <div class="item-key">
                    <strong>信息显示形式</strong>
                </div>
                <div class="item-value">
                    <select name="" class="form-control" style="width: 150px;">
                        <option value="1">普通</option>
                        <option value="1">弹幕</option>
                    </select>
                    <p class="item-info">“弹幕”显示形式不支持图片展示</p>
                </div>
            </div>
             <div class="config-group-item">
                <div class="item-key">
                    <strong>信息切换速度</strong>
                </div>
                <div class="item-value">
                    <input type="text" class="item-input">
                    <p class="item-info">单位：秒；“弹幕” 显示形式此值无效</p>
                </div>
            </div>
            <div class="config-group-item">
                <div class="item-key">
                    <strong>手机端显示标题</strong>
                </div>
                <div class="item-value">
                    <div style="padding-left: 12px">
                        <span class="m-switch">
                            <input type="checkbox" class="m-switch-trigger">
                        </span>  
                    </div>
                    
                    <p class="item-info">开启后将会在手机端显示</p>
                </div>
            </div>

            <div class="config-group-item">
                <div class="item-key">
                    <strong>上墙图片大小</strong>
                </div>
                <div class="item-value">
                    <div style="padding-left: 12px">
                         <select class="form-control" style="width: 150px">
                             <option value="1">大</option>
                             <option value="1">中</option>
                             <option value="1">小</option>
                         </select>
                    </div>
                    
                    <p class="item-info">设置图片大小</p>
                </div>
            </div>
            <div class="config-group-item">
                <div class="item-key">
                    <strong>上墙文字大小</strong>
                </div>
                <div class="item-value">
                    <div style="padding-left: 12px">
                         <select class="form-control" style="width: 150px">
                             <option value="1">大</option>
                             <option value="1">中</option>
                             <option value="1">小</option>
                         </select>
                    </div>
                    
                    <p class="item-info">设置上墙文字大小</p>
                </div>
            </div>

            <div class="config-group-item">
                <div class="item-key">
                    <strong>上墙文字颜色</strong>
                </div>
                <div class="item-value">
                    <div style="padding-left: 12px">
                        <div class="color-list">
                            <p>上墙文字</p>
                            <label class="color-select">
                                <input type="radio" name="textColor">
                                <span class="color" style="background: #FFF"></span>
                                <span class="label-text" style="color:#FFF">#FFFFF</span>
                            </label>
                            <label class="color-select">
                                <input type="radio" name="textColor">
                                <span class="color" style="background: #fcd004"></span>
                                <span class="label-text" style="color:#fcd004">#fcd004</span>
                            </label>
                            <label class="color-select">
                                <input type="radio" name="textColor">
                                <span class="color" style="background: #1ee5e3"></span>
                                <span class="label-text" style="color:#1ee5e3">#1ee5e3</span>
                            </label>
                            <label class="color-select">
                                <input type="radio" name="textColor">
                                <span class="color" style="background: #D81B60"></span>
                                <span class="label-text" style="color:#D81B60">#D81B60</span>
                            </label>
                            <label class="color-select">
                                <input type="radio" name="textColor">
                                <span class="color" style="background: #605CA8"></span>
                                <span class="label-text" style="color:#605CA8">#605CA8</span>
                            </label>
                        </div>
                        <div class="color-list">
                            <p>用户信息</p>
                            <label class="color-select">
                                <input type="radio" name="textColor">
                                <span class="color" style="background: #FFF"></span>
                                <span class="label-text" style="color:#FFF">#FFFFF</span>
                            </label>
                            <label class="color-select">
                                <input type="radio" name="textColor">
                                <span class="color" style="background: #fcd004"></span>
                                <span class="label-text" style="color:#fcd004">#fcd004</span>
                            </label>
                            <label class="color-select">
                                <input type="radio" name="textColor">
                                <span class="color" style="background: #1ee5e3"></span>
                                <span class="label-text" style="color:#1ee5e3">#1ee5e3</span>
                            </label>
                            <label class="color-select">
                                <input type="radio" name="textColor">
                                <span class="color" style="background: #D81B60"></span>
                                <span class="label-text" style="color:#D81B60">#D81B60</span>
                            </label>
                            <label class="color-select">
                                <input type="radio" name="textColor">
                                <span class="color" style="background: #605CA8"></span>
                                <span class="label-text" style="color:#605CA8">#605CA8</span>
                            </label>
                        </div>
                    </div>   
                    <p class="item-info">设置上墙信息颜色</p>
                </div>
            </div>

            <div class="config-group-item">
                <div class="item-key">
                    <strong>敏感词屏蔽</strong>
                </div>
                <div class="item-value">
                    <div style="padding-left: 12px">
                        <p class="tabs">
                            <span class="label label-info">你大爷 <i class="label-close">×</i></span>
                            <span class="label label-info">我操 <i class="label-close">×</i></span>
                            <span class="label label-info">草泥马 <i class="label-close">×</i></span>
                            <span class="label label-info">测试 <i class="label-close">×</i></span>
                        </p>
                        <div class="input-group" style="width: 180px">
                            <input type="text" placeholder="敏感词" class="form-control">
                            <span class="input-group-btn">
                              <button type="button" class="btn btn-info btn-flat">添加</button>
                            </span>
                        </div>
                    </div>
                    
                    <p class="item-info">设置敏感词过滤，保证信息健康良好</p>
                </div>
            </div>

            <div class="config-group-item">
                <div class="item-key">
                    <strong>霸屏价格设置</strong>
                </div>
                <div class="item-value">
                    <div style="padding-left: 12px">
                        <table class="set-data">
                            <tr>
                                <td>价格</td>
                                <td><input type="number" ></td>
                                <td>元</td>
                                <td>时长</td>
                                <td><input type="number" ></td>
                                <td>秒</td>
                                <td><i class="close">×</i></td>
                            </tr>
                            <tr>
                                <td>价格</td>
                                <td><input type="number" ></td>
                                <td>元</td>
                                <td>时长</td>
                                <td><input type="number" ></td>
                                <td>秒</td>
                                <td><i class="close">×</i></td>

                            </tr>
                        </table>
                        <button class="btn btn-info btn-sm">添加项</button>
                    </div>
                    
                    <p class="item-info">设置上墙文字大小</p>
                </div>
            </div>
            <div class="config-group-item">
                <div class="item-key">
                    <strong>红包参数</strong>
                </div>
                <div class="item-value">
                    <div style="padding-left: 12px">
                        <table class="set-data">
                            <tr>
                                <td>价格</td>
                                <td><input type="number" ></td>
                                <td>元</td>
                                <td>时长</td>
                                <td><input type="number" ></td>
                                <td>秒</td>
                                <td><i class="close">×</i></td>
                            </tr>
                        </table>
                    </div>
                    
                    <p class="item-info">设置上墙文字大小</p>
                </div>
            </div>
            
            <div class="config-group-item">
                <div class="item-key">
                    <strong>管理员霸屏次数</strong>
                </div>
                <div class="item-value">
                    <div style="padding-left: 12px">
                        <select class="form-control" style="width: 150px;">
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                        </select>
                    </div>
                    
                    <p class="item-info">设置上墙文字大小</p>
                </div>
            </div>
            <div class="config-group-item">
                <div class="item-key">
                    <strong>小电影</strong>
                </div>
                <div class="item-value">
                    <div style="padding-left: 12px">
                        <span class="m-switch">
                            <input type="checkbox" class="m-switch-trigger">
                        </span>
                    </div>
                    
                    <p class="item-info">开启后手机端用户可以上传小电影</p>
                </div>
            </div>
            <div class="config-group-item">
                <div class="item-key">
                    <strong>内容审核</strong>
                </div>
                <div class="item-value">
                    <div style="padding-left: 12px">
                        <div class="config-group-item">
                            <span class="item-key">小电影审核</span>
                            <div class="item-value">
                                <span class="m-switch">
                                    <input type="checkbox" class="m-switch-trigger">
                                </span>
                            </div>
                        </div>
                        <div class="config-group-item">
                            <span class="item-key">文字信息审核</span>
                            <div class="item-value">
                                <span class="m-switch">
                                    <input type="checkbox" class="m-switch-trigger">
                                </span>
                            </div>
                        </div>
                        <div class="config-group-item">
                            <span class="item-key">图片审核</span>
                            <div class="item-value">
                                <span class="m-switch">
                                    <input type="checkbox" class="m-switch-trigger">
                                </span>
                            </div>
                        </div>
                    </div>
                    
                    <p class="item-info">如果开启系统将会进行智能过滤</p>
                </div>
            </div>
            <div class="config-group-item">
                <div class="item-key">
                    <strong>红包特效</strong>
                </div>
                <div class="item-value">
                    <div style="padding-left: 12px">
                        <span class="m-switch">
                            <input type="checkbox" class="m-switch-trigger">
                        </span>
                    </div>
                    <p class="item-info">开启后会大屏幕会显示红包特效</p>
                </div>
            </div>
            <div class="config-group-item">
                <div class="item-key">
                    <strong>二维码设置</strong>
                </div>
                <div class="item-value">
                    <ul class="sys-qrcode-list">
                        <li>
                            <img src="img/photo1.png" alt="" class="qrcode-img"><br>
                            <label class="m-radio">
                                <input type="radio" name="qrcode">
                                <span class="m-radio-text">系统二维码</span>
                            </label>
                        </li>
                        <li>
                            <img src="img/photo1.png" alt="" class="qrcode-img"><br>
                            <label class="m-radio">
                                <input type="radio" name="qrcode">
                                <span class="m-radio-text">自定义</span>
                            </label>
                        </li>
                        <li>
                            <label>
                            <input type="file" style="display: none;">
                            <div class="cover-upload-box">
                                <span class="upload-icon">
                                    <i class="glyphicon glyphicon-open"></i>
                                    上传二维码
                                </span>
                            </div>
                            </label>
                        </li>
                    </ul>
                    <p class="item-info">上墙界面显示二维码</p>
                </div>
            </div>
            <div class="config-group-item">
                <div class="item-key">
                    <strong>上墙背景图片</strong>
                </div>
                <div class="item-value">
                    <ul class="cover-list">
                        <li>
                            <label>
                            <input type="radio" name="cover">
                            <img src="img/photo1.png" alt="" class="cover-img">
                            <span class="radio-status glyphicon glyphicon-ok"></span>
                            </label>
                        </li>
                        <li>
                            <label>
                            <input type="radio" name="cover">
                            <img src="img/photo2.png" alt="" class="cover-img">
                            <span class="radio-status glyphicon glyphicon-ok"></span>
                            </label>
                        </li>
                        <li>
                            <label>
                            <input type="radio" name="cover">
                            <img src="img/photo3.jpg" alt="" class="cover-img">
                            <span class="radio-status glyphicon glyphicon-ok"></span>
                            </label>
                        </li>
                        <li>
                            <label>
                            <input type="radio" name="cover">
                            <img src="img/photo4.jpg" alt="" class="cover-img">
                            <span class="radio-status glyphicon glyphicon-ok"></span>
                            </label>
                        </li>
                        <li>
                            <label>
                            <input type="file" style="display: none;">
                            <div class="cover-upload-box">
                                <span class="upload-icon">
                                    <i class="glyphicon glyphicon-open"></i>
                                    上传图片
                                </span>
                            </div>
                            </label>
                        </li>
                    </ul>
                    <p class="item-info">请选择高清大图，建议图片大小 1920*1080 ，格式：jpg</p>
                </div>
            </div>

            <div class="config-group-item">
                <div class="item-key">
                    
                </div>
                <div class="item-value">
                    <button class="btn btn-info">提交修改</button>
                </div>
            </div>
        </div>
    </div>




    <div class="tab-pane" id="tab_3">

        <div class="input-group input-group-sm" style="width:400px">
            <input type="text" class="form-control" placeholder="输入关键字查找">
            <span class="input-group-btn">
              <button type="button" class="btn btn-info btn-flat">查找</button>
            </span>
        </div>
        <br>
        <table class="wall-list fans-list table table-hover table-striped table-bordered">
            <thead>
                <tr>
                  <th>用户头像</th>
                  <th>昵称</th>
                  <th>类型</th>
                  <th>上墙内容</th>
                  <th>上墙图片</th>
                  <th>时间</th>
                  <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                  <td><img src="img/user3-128x128.jpg" alt="" class="user-img"></td>
                  <td>John Doe</td>
                  <td>普通上墙</td>
                  <td>xxxx</td>
                  <td><img src="img/photo2.png" alt="" class="wall-img"></td>
                  <td>2017-04-08 22:88</td>
                  <td>
                    <button class="btn btn-danger btn-sm">删除</button>
                  </td>
                </tr>
                <tr>
                  <td><img src="img/user3-128x128.jpg" alt="" class="user-img"></td>
                  <td>John Doe</td>
                  <td>普通上墙</td>
                  <td>xxxx</td>
                  <td><img src="img/photo2.png" alt="" class="wall-img"></td>
                  <td>2017-04-08 22:88</td>
                  <td>
                    <button class="btn btn-danger btn-sm">删除</button>
                  </td>
                </tr>
            </tbody>
        </table>
        <div class="box-footer clearfix">
          <ul class="pagination pagination-sm no-margin pull-right">
            <li><a href="#">«</a></li>
            <li><a href="#">1</a></li>
            <li class="active"><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">»</a></li>
          </ul>
        </div>

    </div>


</div>
<!-- end tab-content -->

                    </div>
                    <!-- end tabs -->
                </div>
            </div>
            <!-- end box -->
        </div>
    </div>
</div>

</div>
<script src="js/jquery-2.2.3.min.js"></script>

<script src="../js/bootstrap.min.js"></script>
